<template>
    <div>
        <el-drawer
            :visible="showNodeOpera"
            :size="500"
            :append-to-body="true"
            :wrapper-closable="false"
            :destroy-on-close="true"
            custom-class="node-opera-box"
            :with-header="false"
            @open="onOpen"
            @closed="resetData"
            @close="onClose">
            <div class="workflow-drawer-title-container">
                <div class="title-info">
                    {{ $i18n.t('label.nodeConfig') }}
                </div>
            </div>
            <div class="workflow-drawer-middle-item-container">
                <el-form ref="nodeForm" label-position="top" :model="localNodeInfo" :rules="rules">
                    <el-form-item prop="title">
                        <span slot="label" class="item-label">{{ $i18n.t('label.nodeName') }}</span>
                        <el-input v-model="localNodeInfo.title"
                                  :maxlength="50"
                                  :placeholder="$i18n.t('label.workflowTaskTip')"/>
                    </el-form-item>
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.approveType') }}</span>
                        <el-select v-model="localNodeInfo.config.approvalType" @change="onApprovalTypeChange"
                                   :placeholder="$i18n.t('label.selectPlaceholder')"
                                   class="item-select">
                            <el-option
                                :label="$i18n.t('label.singleApprove')"
                                :value="approveType.singleApprove">
                            </el-option>
                            <el-option
                                :label="$i18n.t('label.multipleApprove')"
                                :value="approveType.multipleApprove">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--多人审批-->
                    <el-form-item v-if="localNodeInfo.config.approvalType === approveType.multipleApprove"
                                  class="custom-item">
                        <span slot="label" class="item-label">{{ $i18n.t('label.multipleApprove') }}</span>
                        <el-radio-group v-model="localNodeInfo.config.many" size="medium">
                            <el-radio :label="multipleApproveType.orSign"
                                      class="radio-line">
                                {{ $i18n.t('label.orSign') }}
                            </el-radio>
                            <el-radio :label="multipleApproveType.andSign"
                                      class="radio-line">
                                {{ $i18n.t('label.andSign') }}
                            </el-radio>
                        </el-radio-group>
                        <el-checkbox v-if="localNodeInfo.config.many === multipleApproveType.orSign"
                                     class="select-user"
                                     size="medium"
                                     v-model="localNodeInfo.config.selectUser">
                            {{ $i18n.t('label.selectUserTip') }}
                        </el-checkbox>
                    </el-form-item>
                    <!--选择审批人-->
                    <el-form-item>
                        <span slot="label" class="item-label">
                            {{ $i18n.t(localNodeInfo.type === nodeType.cc ? 'label.ccUser' : 'label.approver') }}
                            <el-checkbox v-if="localNodeInfo.type === nodeType.cc "
                                         class="select-user"
                                         size="medium"
                                         style="margin-left: 20px"
                                         v-model="localNodeInfo.config.selectCc">
                            {{ $i18n.t('label.selectCcTip') }}
                        </el-checkbox>
                        </span>
                        <el-button icon="el-icon-circle-plus" @click="selectApproverState = true">
                            {{ $i18n.t(localNodeInfo.type === nodeType.cc ? 'label.addCc' : 'label.selectApprover') }}
                        </el-button>
                        <div class="selected-user-container">
                            <el-tag v-for="item in tagList"
                                    :label="item.userRefId"
                                    :key="item.userRefId"
                                    closable
                                    class="user-tag"
                                    color="#a0cfff"
                                    @close="onRemove(item.userId)"
                                    effect="dark">
                                {{ item.userName }}
                            </el-tag>
                        </div>
                    </el-form-item>
                    <!--审批通过后-->
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.approvePassed') }}</span>
                        <el-checkbox v-model="localNodeInfo.config.noticeSponsor">
                            {{ $i18n.t('label.noticeStart') }}
                        </el-checkbox>
                        <el-checkbox v-model="localNodeInfo.config.noticeNextStep">
                            {{ $i18n.t('label.noticeNext') }}
                        </el-checkbox>
                    </el-form-item>
                    <!--审批拒绝-->
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.approveRejected') }}</span>
                        <el-checkbox v-model="localNodeInfo.config.rejectedNotice">
                            {{ $i18n.t('label.noticeStart') }}
                        </el-checkbox>
                    </el-form-item>
                    <!--无审批人-->
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.nodeHasNotApprover') }}</span>
                        <el-radio-group v-model="localNodeInfo.config.noApprovedUser" size="medium">
                            <el-radio :label="noApproverOptions.toNextNode"
                                      class="radio-line">
                                {{ $i18n.t('label.toNextNode') }}
                            </el-radio>
                            <el-radio :label="noApproverOptions.toAdmin"
                                      class="radio-line">
                                {{ $i18n.t('label.toAdmin') }}
                            </el-radio>
                            <el-radio :label="noApproverOptions.keepCurrent"
                                      class="radio-line">
                                {{ $i18n.t('label.keepCurrent') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.jumpNodeTip') }}</span>
                        <el-radio-group v-model="localNodeInfo.config.skip" size="medium">
                            <el-radio :label="true">
                                {{ $i18n.t('label.updateForm') }}
                            </el-radio>
                            <el-radio :label="false">
                                {{ $i18n.t('label.updateFormNo') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item v-if="localNodeInfo.type != nodeType.cc ">
                        <span slot="label" class="item-label">{{ $i18n.t('label.updateFormTip') }}</span>
                        <el-radio-group v-model="localNodeInfo.config.editable" size="medium">
                            <el-radio :label="true">
                                {{ $i18n.t('label.updateForm') }}
                            </el-radio>
                            <el-radio :label="false">
                                {{ $i18n.t('label.updateFormNo') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                
                </el-form>
            </div>
            <div class="workflow-drawer-bottom-container">
                <el-button @click.stop="onClose" size="medium">{{ $i18n.t('button.cancel') }}</el-button>
                <el-button type="primary" @click="onSave" size="medium">{{ $i18n.t('button.sure') }}</el-button>
            </div>
        </el-drawer>
        <person-selection :value="selectApproverState"
                          select-type="checkbox"
                          :include-tabs="[tabs.orgTree,tabs.role,tabs.group]"
                          :checked-max="checkNum"
                          @sure="onSaveUserList"
                          :default-checked="checkData"
                          @cancel="selectApproverState = false">
            <div slot="pane-custom" class="" :slot-title="$i18n.t('label.customTab')">
                插槽
            </div>
        </person-selection>
    </div>

</template>

<script lang="ts">
import {Component, Emit, Prop, Vue} from "vue-property-decorator";
import NodeModel from "../model/node.model";
import {ElForm} from "element-ui/types/form";
import {ApproveTypeEnum, MultipleApproveTypeEnum, NoApproveEnum, NodeTypeEnum} from "../enums/node.enum";
import PersonSelection from '@/components-com/person-selection/index.vue';
import {PersonSelectionTabsEnum} from '@/components-com/person-selection/enums/person-selection.enum';
import PersonModel from "@/components-com/person-selection/model/person.model";
import {DEFAULT_CHECK_PERSON_NUMBER, SINGLE_CHECK_PERSON_NUMBER} from "../const/workflow.const";

/**
 * 节点操作抽屉
 */
@Component({components: {PersonSelection}})
export default class NodeOperaDrawer extends Vue {
    /*抽屉状态*/
    @Prop({default: false})
    private showNodeOpera: boolean;
    
    /*节点信息*/
    @Prop()
    private nodeInfo: NodeModel;
    
    /*发射关闭事件*/
    @Emit()
    private onClose() {
    }
    
    private tabs = PersonSelectionTabsEnum;
    $refs: {
        nodeForm: ElForm;
    }
    
    /*审批人选择器状态*/
    private selectApproverState = false;
    /*引用子组价声明*/
    /*组件内部使用节点信息*/
    private localNodeInfo = new NodeModel();
    private nodeType = NodeTypeEnum;
    /*审批类型*/
    private approveType = ApproveTypeEnum;
    /*多人审批类型*/
    private multipleApproveType = MultipleApproveTypeEnum;
    /*通过后操作选项*/
    private noApproverOptions = NoApproveEnum;
    
    /*人员选择数量*/
    private checkNum: number = DEFAULT_CHECK_PERSON_NUMBER;
    
    private rules = {
        title: [{required: true, message: this.$i18n.t("label.workflowTaskTip"), trigger: 'blur'}]
    }
    
    /**
     * 打开抽屉时将传入值赋值给本地变量
     */
    private onOpen() {
        this.localNodeInfo = _.cloneDeep(this.nodeInfo);
        //翻译文字
        if (this.$i18n.te(this.localNodeInfo.title)) {
            this.localNodeInfo.title = this.$i18n.t(this.localNodeInfo.title) as string;
        }
    }
    
    
    /** 删除人员 */
    private onRemove(userId: number) {
        this.localNodeInfo.userList = this.localNodeInfo.userList.filter(item => item.userId === userId)
    }
    
    
    /*保存*/
    private onSave() {
        this.$refs.nodeForm.validate((state: boolean) => {
            if (state) {
                if (this.localNodeInfo.userList.length) {
                    this.localNodeInfo.name = this.localNodeInfo.userList.map(item => item.userName).join(',');
                }
                this.$emit('on-save', this.localNodeInfo)
            }
        });
    }
    
    /**
     * 保存人员
     * todo 角色 自定义
     */
    private onSaveUserList(data: PersonModel[]) {
        this.localNodeInfo.userList = data.map(item => {
            return {userName: item.userName, userRefId: item.refId as number, userId: item.userId}
        });
        this.selectApproverState = false;
    }
    
    /**
     * 控制可选择人员数量
     */
    private onApprovalTypeChange(data: ApproveTypeEnum) {
        if (data === ApproveTypeEnum.singleApprove) {
            this.checkNum = SINGLE_CHECK_PERSON_NUMBER;
        } else {
            this.checkNum = DEFAULT_CHECK_PERSON_NUMBER;
        }
    }
    
    /**
     * 关闭时重置数据
     */
    private resetData() {
        this.checkNum = DEFAULT_CHECK_PERSON_NUMBER;
        this.localNodeInfo = new NodeModel();
    }
    
    get checkData() {
        return this.localNodeInfo.userList.map(item => {
            item['refId'] = item.userName + item.userRefId;
            return item;
        })
    }
    
    /**
     * tag 列表;
     */
    get tagList() {
        return _.unionBy(this.localNodeInfo.userList.map(item => {
            return {userName: item.userName, userRefId: item.userRefId, userId: item.userId}
        }), 'userId');
    }
}
</script>

<style lang="scss">
@import "../css/workflow-csss.scss";

.node-opera-box {
    .workflow-drawer-middle-item-container {
        .item-label {
            font-weight: bold;
            font-size: 14px;
            color: $title-color;
        }
        
        .item-select {
            width: 100%;
        }
        
        .radio-line {
            width: 100%;
            
            &:not(:last-of-type) {
                margin-bottom: 15px;
            }
        }
        
        .custom-item {
            position: relative;
            
            .select-user {
                transform: translateY(-17px);
            }
        }
        
        .selected-user-container {
            margin-top: 12px;
            max-height: 250px;
            overflow-y: auto;
            
            .user-tag {
                border-color: #a0cfff;
                cursor: pointer;
                border-radius: 4px;
                margin-left: 0;
                margin-right: 8px;
                
                &:hover {
                    background-color: #389cff !important;
                    box-shadow: 0 0 8px 0 #9acafa;
                }
                
            }
        }
        
    }
}
</style>
